<template>
<div v-if="isRefresh" id="app">
    <water-mark></water-mark>
    <div v-if="loading" class="loading-box">
        <rotate-square5></rotate-square5>
    </div>
    <div class="app-box">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</div>
</template>

<script>
import {
    mapMutations,
    mapGetters
} from 'vuex'
import WaterMark from '@/components/WaterMark'
import { RotateSquare5 } from 'vue-loading-spinner'
export default {
    name: 'App',
    // 提供刷新当前页面的方法，可在组件内注入inject:['reload']，掉用this.reload()
    provide () {
        return {
            reload: this.reload
        }
    },
    components: { RotateSquare5, WaterMark },
    data () {
        return {
            isRefresh: true,
            loading: false,
            projectId: localStorage.getItem('projectId') || ''
        }
    },
    created () {
        this.load()
        this.setProjectId(this.projectId)
        this.getProjectList()
    },
    computed: {
        ...mapGetters({
            projectList: 'common/getProjectList'
        })
    },
    methods: {
        ...mapMutations({
            setProjectId: 'common/setProjectId',
            setProjectList: 'common/setProjectList',
            setCurrentProjectInfo: 'common/setCurrentProjectInfo'
        }),
        getProjectInfo () {
            const [item] = this.projectList.filter(v => v.projectId - 0 === this.projectId - 0)
            item && this.setCurrentProjectInfo(item)
        },
        getProjectList () {
            this.$post('/project/listByMember', {}).then(res => {
                if (res) {
                    this.setProjectList(res.rows)
                    this.getProjectInfo()
                }
            })
        },
        reload () {
            this.isRefresh = false
            this.$nextTick(() => {
                this.isRefresh = true
            })
        },
        // 加载中
        load () {
            this.loading = true
            const timer = setInterval(() => {
                this.loading = false
                window.clearInterval(timer)
            }, 2000)
        }
    }
}
</script>

<style lang="less">
@import './common.less';

#app {
    width: 100%;
    height: 100%;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    .app-box {
        width: 100%;
        height: 100%;
    }
    .loading-box {
        background: #ffff;
        z-index: 2003;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .spinner-inner {
            transform: scale(1) !important;
        }
    }
}
</style>
